<template>
  <div class="health-assessment-detail">
    <div class="page-header">
      <h1>健康评估服务</h1>
      <p>专业的健康评估体系，为长者提供全面的健康管理服务</p>
    </div>

    <div class="assessment-content">
      <!-- 评估流程 -->
      <div class="assessment-process">
        <h2>评估流程</h2>
        <div class="process-steps">
          <div class="step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h3>初步评估</h3>
              <p>收集基本信息，了解长者健康状况和需求</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h3>专业检查</h3>
              <p>由专业医护人员进行全面的身体检查</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h3>综合评估</h3>
              <p>结合检查结果进行综合健康评估</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">4</div>
            <div class="step-content">
              <h3>制定方案</h3>
              <p>根据评估结果制定个性化的照护方案</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 评估项目 -->
      <div class="assessment-items">
        <h2>评估项目</h2>
        <div class="items-grid">
          <div class="item-card">
            <div class="item-icon">🩺</div>
            <h3>基础生命体征</h3>
            <ul>
              <li>血压监测</li>
              <li>心率测量</li>
              <li>体温检测</li>
              <li>呼吸频率</li>
            </ul>
          </div>
          <div class="item-card">
            <div class="item-icon">🧠</div>
            <h3>认知功能评估</h3>
            <ul>
              <li>记忆力测试</li>
              <li>定向力评估</li>
              <li>计算能力</li>
              <li>抽象思维</li>
            </ul>
          </div>
          <div class="item-card">
            <div class="item-icon">💪</div>
            <h3>身体功能评估</h3>
            <ul>
              <li>肌力测试</li>
              <li>平衡能力</li>
              <li>行走能力</li>
              <li>日常生活能力</li>
            </ul>
          </div>
          <div class="item-card">
            <div class="item-icon">❤️</div>
            <h3>心理状态评估</h3>
            <ul>
              <li>情绪状态</li>
              <li>睡眠质量</li>
              <li>社交能力</li>
              <li>生活质量</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 评估标准 -->
      <div class="assessment-standards">
        <h2>评估标准</h2>
        <div class="standards-content">
          <div class="standard-section">
            <h3>ADL日常生活能力评估</h3>
            <p>评估长者在进食、穿衣、洗漱、如厕、移动等方面的独立能力</p>
          </div>
          <div class="standard-section">
            <h3>MMSE简易精神状态检查</h3>
            <p>标准化的认知功能评估工具，检测认知障碍程度</p>
          </div>
          <div class="standard-section">
            <h3>营养风险评估</h3>
            <p>评估营养状况，预防营养不良和相关并发症</p>
          </div>
          <div class="standard-section">
            <h3>跌倒风险评估</h3>
            <p>识别跌倒风险因素，制定预防措施</p>
          </div>
        </div>
      </div>

      <!-- 服务优势 -->
      <div class="service-advantages">
        <h2>服务优势</h2>
        <div class="advantages-grid">
          <div class="advantage-card">
            <div class="advantage-icon">👨‍⚕️</div>
            <h3>专业团队</h3>
            <p>由资深医生、护士、康复师组成的专业评估团队</p>
          </div>
          <div class="advantage-card">
            <div class="advantage-icon">📊</div>
            <h3>科学评估</h3>
            <p>采用国际标准的评估工具和方法</p>
          </div>
          <div class="advantage-card">
            <div class="advantage-icon">🎯</div>
            <h3>个性化方案</h3>
            <p>根据评估结果制定针对性的照护计划</p>
          </div>
          <div class="advantage-card">
            <div class="advantage-icon">🔄</div>
            <h3>持续跟踪</h3>
            <p>定期复评，动态调整照护方案</p>
          </div>
        </div>
      </div>

      <!-- 预约评估 -->
      <div class="appointment-section">
        <h2>预约健康评估</h2>
        <div class="appointment-form">
          <el-form :model="appointmentForm" :rules="appointmentRules" ref="appointmentFormRef" label-width="120px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="appointmentForm.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="appointmentForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="评估对象" prop="assessee">
              <el-input v-model="appointmentForm.assessee" placeholder="请输入需要评估的长者姓名"></el-input>
            </el-form-item>
            <el-form-item label="预约时间" prop="appointmentTime">
              <el-date-picker
                v-model="appointmentForm.appointmentTime"
                type="datetime"
                placeholder="选择预约时间"
                value-format="YYYY-MM-DD HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="备注信息" prop="remark">
              <el-input
                type="textarea"
                v-model="appointmentForm.remark"
                placeholder="请输入其他需要说明的情况"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitAppointment" :loading="submitting">
                提交预约申请
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="contact-info">
        <h2>联系方式</h2>
        <div class="contact-grid">
          <div class="contact-item">
            <div class="contact-icon">📞</div>
            <div class="contact-details">
              <h3>咨询电话</h3>
              <p>022-12345678</p>
              <p>服务时间：周一至周日 8:00-18:00</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📍</div>
            <div class="contact-details">
              <h3>机构地址</h3>
              <p>天津市西青区精武镇学府东路199号</p>
              <p>交通便利，环境优美</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📧</div>
            <div class="contact-details">
              <h3>电子邮箱</h3>
              <p>health@smarteldercare.com</p>
              <p>专业团队及时回复</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const appointmentFormRef = ref()
const submitting = ref(false)

const appointmentForm = reactive({
  name: '',
  phone: '',
  assessee: '',
  appointmentTime: '',
  remark: ''
})

const appointmentRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  assessee: [
    { required: true, message: '请输入评估对象姓名', trigger: 'blur' }
  ],
  appointmentTime: [
    { required: true, message: '请选择预约时间', trigger: 'change' }
  ]
}

const submitAppointment = () => {
  appointmentFormRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      // 模拟提交过程
      setTimeout(() => {
        ElMessage.success('预约申请提交成功！我们的工作人员将在24小时内与您联系')
        resetForm()
        submitting.value = false
      }, 1000)
    }
  })
}

const resetForm = () => {
  appointmentFormRef.value.resetFields()
}
</script>

<style scoped>
.health-assessment-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.assessment-content > div {
  margin-bottom: 50px;
  padding: 30px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.8rem;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

/* 评估流程样式 */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.step-number {
  width: 40px;
  height: 40px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.step-content p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* 评估项目样式 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.item-card {
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.item-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.item-card h3 {
  margin-bottom: 15px;
  color: #333;
}

.item-card ul {
  text-align: left;
  padding-left: 20px;
}

.item-card li {
  margin-bottom: 5px;
  color: #666;
}

/* 评估标准样式 */
.standards-content {
  display: grid;
  gap: 20px;
}

.standard-section {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #67c23a;
}

.standard-section h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.standard-section p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

/* 服务优势样式 */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.advantage-card {
  text-align: center;
  padding: 20px;
}

.advantage-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.advantage-card h3 {
  margin-bottom: 10px;
  color: #333;
}

.advantage-card p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* 预约表单样式 */
.appointment-form {
  max-width: 600px;
}

/* 联系方式样式 */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.contact-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.contact-details h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.contact-details p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .health-assessment-detail {
    padding: 10px;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .process-steps,
  .items-grid,
  .advantages-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
</style>
